<template>
	<view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else>
		<view>
			<view class="page_top2" :style="{
				background: topNav ? 'white' : 'transparent',
				'z-index': 199,
			}">
				<top-status></top-status>
				<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
									mode="widthFix"></image> -->
					<uni-icons :color="topNav ? 'black' : '#495052'" type="left" size="30"></uni-icons>
				</view>
				<view class="topTitle hiddenText" v-show="topNav"></view>
				</view>
			</view>
		</view>
        <image class="bgimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1723515039342174.png"></image>
        <view class="user_edit wap">
            <view class="group group_hd">
				<view class="lab"><!-- <view class="must">*</view> -->圈子头像</view>
				<view class="inp_box">
					<button class="user_header_btn"  hover-class="none" @click="chooseavatar">
						<view class="user_headerimg">
							<view class="cover_btn">
								<image class="image_user" v-if="isHeader" @error="isHeader = false" :src="reqData.Logo" mode="aspectFill" />
								<image class="iamge_icon" v-else src="@/static/img/hd.png" mode="" />
							</view>
							<uni-icons type="right" size="18" color="#c6c6c6"></uni-icons>
						</view>
					</button>
				</view>
			</view>
			<view class="group">
				<view class="lab"><!-- <text class="must">*</text> -->圈子名</view>
				<view class="inp_box">
					<input v-if="reqData.Status == 1 || reqData.Status == 0" type="text" maxlength="10" v-model="reqData.TeamName" disabled @click="tisppag"/>
					<input v-else type="text" maxlength="10" v-model="reqData.TeamName"/>
				</view>
			</view>
			<view class="group">
				<view class="lab"><!-- <text class="must">*</text> -->圈子口号</view>
				<view class="inp_box">
					<input type="text" maxlength="50" v-model="reqData.Tips" placeholder="请用一句话来描述圈子" />
				</view>
			</view>
			<view class="group" @click="showCity = true">
				<view class="lab">所在城市</view>
				<view class="inp_box">
					<input type="text" v-model="cityStr" disabled placeholder="请选择" />
				</view>
				<view class="icon_box"><uni-icons type="right" size="18" color="#c6c6c6"></uni-icons></view>
			</view>
			<view class="tagbox">
				<view class="tagtitle">运动类别</view>
				<view class="tagtextbox">
					<view class="tagtext" :class="item.checked ? 'text4' : ''" v-for="(item,index) in taglist" :key="index" @click="skitype(item.Code, item.checked)">{{item.Code}}</view>
				</view>	
			</view>
			<view class="group_textarea">
				<view class="dectitle">圈子介绍</view>
				<textarea style="width: 100%;height: 54%; font-weight: 400;" :value="reqData.Descript"
					placeholder="请填写介绍" placeholder-class="remtext" maxlength="200" @input="inputrem" />
				<view class="count">{{ reqData.Descript.length }} / {{ maxCount }}</view>
			</view>           
        </view>
		<!-- <view style="height:255rpx;"></view> -->
		<view class="bottombtn">
			<view class="paybtn" @click="CreateTeam()">{{'保存'}}</view>
		</view>

		<u-picker :show="showCity" @cancel="showCity = false" immediateChange ref="uPicker" :columns="cityList"
			@change="changeHandler" @confirm="setCity"></u-picker>
    </view>
</template>

<script>
import { ieChooseImage,isCheckImage } from "../../common/imgExamine";
import topStatus from "@/components/topStatus/topStatus.vue";
import address from './address.js';
export default {
components: {
	topStatus,
},
data() {
return {
	load:false,
    Skillslist:[],
    cirID:'',
    resData:{},
	maxCount:200,
	newlist:[],
	cityList: [],
	cityStr:'',
	showCity: false,
	isHeader:true,
	reqData:{
		TeamName:'', //圈子名称
		Descript:'', //圈子介绍
		Logo:'', // 圈子logo
		Province:'', //所在省份
		City:'', //所在城市
		Tag:'', // 标签
		Tips:'',//口号
	},
	taglist:[],
};
},
computed: {
	numChoose() {
	const list = this.taglist;
	let num = 0;
	for (let i = 0; i < list.length; i++) {
		if (list[i].checked) {
		num++;
		}
	}
	return num;
	},
},
async onLoad(e){
    this.cirID = e.id
    this.cirDetail()
	let add = address;
	let arr1 = add.map(item => item.name);
	let arr2 = add[0].children.map(item => {
		if (item.name == '市辖区' || item.name == '县') {
			return '--';
		} else {
			return item.name;
		}
	});
	this.cityList = [arr1, arr2];
},
methods: {
    tisppag(){
		this.$pv.msg('不可修改圈子名称');
	},
    //圈子详情
    async cirDetail() {
      let res = await this.$api.post("Team/Detail", {
        ID: this.cirID
      })
      if (res.code == 0) {
        this.reqData = res.data
		this.reqData.TeamName = this.$util.entitiesToUtf16(res.data.TeamName)  
		this.reqData.Descript = this.$util.entitiesToUtf16(res.data.Descript)
		this.reqData.Logo = res.data.Logo
		this.reqData.Tips = this.$util.entitiesToUtf16(res.data.Tips)
        this.Skillslist = res.data.Tag.split(',')
        if( res.data.Province == res.data.City){
            this.cityStr = res.data.City
        }else{
            this.cityStr = res.data.Province + ' '+res.data.City
        }
        await this.getSportType()
		this.load = true
      }
    },
	//返回上一页
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/home'
        });
      }
    },
	// 获取运动标签
    async getSportType() {
      let res = await this.$api.post("Catalog/GetDictionary", {
        Type: "SportType",
      });
      if (res.data.length > 0) {
        let list = [];
        for (let i = 0; i < res.data.length; i++) {
          const { ID, Code } = res.data[i];
          let data = {
            Code: Code,
            checked: this.Skillslist.includes(res.data[i].Code),
            id: ID,
          };
          list.push(data);
        }
        this.taglist = list;

      }
    },
	inputrem(e) {
		const { value, cursor } = e.detail
		let str = this.$util.entitiesToUtf16(value)
		if (str.length > 200) {
			this.reqData.Descript = str.slice(0, 200)
		} else {
			this.reqData.Descript = str
		}
	},
	async CreateTeam(){
		
		if(!this.reqData.Logo){
			this.$pv.msg('请选择头像');
			return 
		}
		// if(!this.reqData.TeamName){
		// 	this.$pv.msg('请填写名称');
		// 	return 
		// }
		if(!this.reqData.Tips){
			this.$pv.msg('请填写口号');
			return 
		}
		if(!this.reqData.City){
			this.$pv.msg('请选择城市');
			return 
		}
		if(!this.reqData.Tag){
			this.$pv.msg('请选择标签');
			return 
		}
		if(!this.reqData.Descript){
			this.$pv.msg('请填写介绍');
			return 
		}
		let data = JSON.parse(JSON.stringify(this.reqData))
		data.TeamName = this.$util.utf16ToEntities(this.reqData.TeamName)
		data.Descript = this.$util.utf16ToEntities(this.reqData.Descript)
		data.Tips = this.$util.utf16ToEntities(this.reqData.Tips)
		// console.log(data,'res');
        let _this = this
        uni.showModal({
          title: "温馨提示",
          content: "您确定要修改圈子吗？",
          confirmText: "确定",
          cancelText: "取消",
          success: async function (res) {
            if (res.confirm) {
              let res1 = await _this.$api.post('Team/EditTeam',{
                    ...data
                })
                if (res1.code == 0) {
                    _this.$pv.msg('修改成功')
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 300);
                }else{
                    _this.$pv.msg(res.message)
                }
            } else if (res.cancel) {
              
            }
          },
        });
	},
	skitype(Code, checked) {
		this.newlist = []
		let list = this.taglist;
		let listtrue = []
		const maxNum = 3
		const isChooseNum = this.reqData.Tag?this.reqData.Tag.split(',').length:0 || 0
		if (!checked && isChooseNum>=maxNum) {
			this.$pv.msg("最多选" + maxNum+'个类别' );
			return;
		}
		for (let i = 0; i < list.length; i++) {
			list[i].checked =
			list[i].Code == Code ? !list[i].checked : list[i].checked;
			if(list[i].checked){
				listtrue.push(list[i].Code)
			}
		}
		console.log(listtrue);
		
		this.reqData.Tag = listtrue.join(',')
	},
	changeHandler(e) {
		console.log(e);
		const {
			columnIndex,
			index,
			// 微信小程序无法将picker实例传出来，只能通过ref操作
			picker = this.$refs.uPicker
		} = e;
		if (columnIndex === 0) {
			picker.setColumnValues(
				1,
				address[index].children.map(item => {
					if (item.name == '市辖区' || item.name == '县') {
						return '--';
					} else {
						return item.name;
					}
				})
			);
		}
	},
	setCity(e) {
		this.reqData.Province = e.value[0];
		if (e.value[1] === '--') {
			this.reqData.City = this.reqData.Province;
			this.cityStr = e.value[0];
		} else {
			this.reqData.City = e.value[1];
			this.cityStr = e.value[0] + ' ' + e.value[1];
		}
		this.showCity = false;
	},

	async chooseavatar(e) {
		try {

			let _this = this;
			uni.chooseImage({
				count: 1, //默认9
				mediaType: ['image'],
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera', 'album'], //从相册选择
				success: async function (res) {

					let o = {
						ID: "",
						duration: 0,
						fileType: 'image',
						tempUrl: res.tempFiles[0].path,
						flieUrl: res.tempFiles[0].path,
						tempKey: uni.$u.guid(8),
						pro: 0,
						netPath: "",
					};

					let r = await _this.uploadingList(o.flieUrl, o.tempKey,
						new Date().getTime() - 500);
					_this.reqData.Logo = r;
					_this.isHeader = true;
				}
			})
		} catch (error) {
			this.$pv.msg('图片上传失败');
			console.log(error);
		}
	},
	async uploadingList(url, tempKey, timeStamp) {
		this.$pv.load('正在上传');
		const r = await this.$upload(url,()=>{});
		
		this.$pv.closeLoad('')
		console.log('-----------',r);
		this.iscro = false
		return r;
	},
},

}
</script>
<style lang='scss'>
page{
	background-color: #f6f6f6;
}
button[plain] {
		border: 0
	}
button::after{ border: none;} 
.bgimg{
	width: 750rpx;
	height: 440rpx;
}
.page_top2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  .tabsBack {
    height: 44px;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
    z-index: 999;

    .topTitle {
      padding-left: 20rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      width: 300rpx;
    }

    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }
}

.user_edit {
		width: 702rpx;
		// margin: 0 auto;
		border-radius: 16rpx;
		// padding-bottom: 220rpx;
		background: #fff;
		margin-top: 16rpx;
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);
	}
.tagbox{
	margin-top: 20rpx;
	.tagtitle{
		color: #333333;
		margin-bottom: 25rpx;
	}
	.tagtextbox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.tagtext{
		padding: 10rpx 22rpx;
		border: 2rpx solid #e4e4e4;
		border-radius: 8rpx;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	.text4{
		color: #fff;
		background-color: #706EEE;
		border: 2rpx solid transparent;
	}
}
.group_hd {
		height: auto;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
.group {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;

		&::after {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: 2rpx;
			content: '';
			transform: scaleY(.6);
			background-color: #E4E4E4;
		}

		.inp_box {
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: flex-end;

			input {
				width: 100%;
				text-align: right;
				padding: 32rpx 0;
				color: #333;
				font-size: 32rpx;
			}
			.inp_text{
				font-size: 32rpx;
				padding: 32rpx 0;
			}
			.radio_s{
				display: flex !important;
				height:100rpx;
			}
			.item_check {
				padding: 10rpx;
				display: flex;
				flex-direction: row;
				
				.desc{
					color:#000 !important;
				}
			}
		}
		.diyPadding{
			padding: 32rpx 0;
		}
		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}

		.inp_append {
			margin-left: 8rpx;
		}

		.s_btn {
			color: #fff;
			    font-size: 24rpx;
			    width: 170rpx !important;
			    height: 60rpx !important;
			    border-radius: 5rpx;
			    background-color: #706EEE;
			    margin: 0 0 0 20rpx;
		}

	}
.user_header_btn {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		border-radius: 0;
		.user_headerimg{
			display: flex;
			align-items: center;
		}
	}

	.user_header,
	.cover_btn {
		border-radius: 10rpx;
		overflow: hidden;
		height: 100rpx;
		width: 100rpx;
		background: rgba(255, 255, 255, 0.1);
		margin-right: 16rpx;
		display: flex;
		// text-align: center;
		justify-content: center;
		align-items: center;

		.iamge_icon {
			height: 60rpx;
			width: 60rpx;
		}

		.image_user {
			height: 100%;
			width: 100%;
			border-radius: 50%;
		}
	}
.group_textarea {
	height: 264rpx;
	margin-top: 30rpx;
	// background-color: #fff;
	// padding-left: 32rpx;
	// text-indent: 2em;
	box-sizing: border-box;
	position: relative;
	.remtext {
		font-size: 28rpx !important;
		color: #C2C2C2 !important;
		font-weight: 400 !important;
	}
	.dectitle{
		margin-bottom: 25rpx;
	}
	.count {
		position: absolute;
		bottom: 15rpx;
		right: 15rpx;
		font-size: 24rpx;
		color: #C2C2C2;
	}
	/deep/ .u-textarea {
		background: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-bottom: none !important;
		padding: 0 !important;
		height: 100% !important;
		text-indent: 2em;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #0d0d0d !important;
	}

	/deep/ .u-textarea__field {
		color: #0d0d0d !important;
		font-size: 28rpx !important;
		height: 100% !important;
	}
}
.bottombtn {
  width: 100%;
  height: 196rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 9999;

  .paybtn {
    width: 670rpx;
    height: 88rpx;
    background: #706EEE;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
    margin: 0 auto;
    margin-top: 36rpx;

    // position: fixed;
    // bottom: 88rpx;
    // left: 50%;
    // transform: translateX(-50%);
  }
}
</style>